.legend(ng-controller='LegendCtrl', ng-model='frame.results.graph')
  .legend-row(ng-if='labels[""].count', ng-class="{contracted: labelsContracted}")
    .row-toggle(overflow-with-toggle='', ng-click="labelsContracted = !labelsContracted")
      .fa(ng-class="labelsContracted ? 'fa-caret-left' : 'fa-caret-down'", class="overflow-indicator")
    ul.list-unstyled.list-labels
      li(ng-repeat='(label, node) in labels', ng-class="{active: currentItem == node}")
        .contents(ng-click="onItemClick(node, 'label')")
          .token.token-label(ng-style='{"background-color": node.style.props.color, "color": node.style.props["text-color-internal"]}') {{label || '*'}}
            span.count ({{node.count}})
  .legend-row(ng-if='types[""].count', ng-class="{contracted: typesContracted}")
    .row-toggle(overflow-with-toggle='', ng-click="typesContracted = !typesContracted")
      .fa(ng-class="typesContracted ? 'fa-caret-left' : 'fa-caret-down'", class="overflow-indicator")
    ul.list-unstyled.list-relationships
      li(ng-repeat='(type, rel) in types', ng-class="{active: currentItem == node}")
        .contents(ng-click="onItemClick(rel, 'relationshipType')")
          .token.token-relationship-type(ng-style='{"background-color": rel.style.props.color, "color": rel.style.props["text-color-internal"]}') {{type || '*'}}
            span.count ({{rel.count}})
